<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
  <meta charset="UTF-8">

  <meta name="description" content="">
  <meta name="keywords" content="">

  <title>Login</title>

  <link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
  <link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link href="/css/element.css" media="screen" rel="stylesheet" type="text/css">

  <style>
    .layui-input{width: 195px}
    .layui-input-block{width: 300px}
    .layui-tab {
       margin: 10px 0;
      text-align: center!important;
    }
    .layui-tab-content{
      text-align: center;
      margin: 0 auto;
      width: 80%;
    }
    #main.entire_width {
       margin: 0;
    }
    #main {
       margin: 0;
    }

    .layui-tab-item{
      margin: 1% auto;
      text-align: center;
    }
    .layui-formUser{
      width:52%;

    }
    .layui-formAdressr{
      width:50%;
    }
    .layui-formPwd{
      width:42%;

    }

  </style>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
    }
    .avatar {
      width: 200px;
      height: 200px;
      display: block;
    }
  </style>
  <script src="/js/jquery-1.7.2.min.js" ></script>
  <script src="/js/html5.js" ></script>
  <script src="/js/jflow.plus.js"></script>
  <script src="/js/jquery.carouFredSel-5.2.2-packed.js"></script>
  <script src="/js/checkbox.js"></script>
  <script src="/js/radio.js"></script>
  <script src="/js/selectBox.js"></script>
  <script src="/layui/layui.js"></script>
  <script src="/layui/lay/modules/element.js"></script>
  <script src="/js/vue.js"></script>
  <script src="/js/element.js"></script>


  <script>
      $(document).ready(function() {
          $("select").selectBox();
      });
  </script>

  <script>
      $(document).ready(function(){
          $("#myController").jFlow({
              controller: ".control", // must be class, use . sign
              slideWrapper : "#jFlowSlider", // must be id, use # sign
              slides: "#slider",  // the div where all your sliding divs are nested in
              selectedWrapper: "jFlowSelected",  // just pure text, no sign
              width: "984px",  // this is the width for the content-slider
              height: "480px",  // this is the height for the content-slider
              duration: 400,  // time in miliseconds to transition one slide
              prev: ".slidprev", // must be class, use . sign
              next: ".slidnext", // must be class, use . sign
              auto: true
          });
      });
  </script>
  <script>
      $(function() {
          $('#list_product').carouFredSel({
              prev: '#prev_c1',
              next: '#next_c1',
              auto: false
          });
          $('#list_product2').carouFredSel({
              prev: '#prev_c2',
              next: '#next_c2',
              auto: false
          });
          $('#list_banners').carouFredSel({
              prev: '#ban_prev',
              next: '#ban_next',
              scroll: 1,
              auto: false
          });
          $(window).resize();
      });
  </script>
  <script>
      $(document).ready(function(){
          $("button").click(function(){
              $(this).addClass('click')
          });
      })
  </script>
  <script>
      $(function () {
          var uid=sessionStorage.getItem("userId");
          var conditionData = {
              "userId":uid//用户编号
          };
          var conditionDataJSON = JSON.stringify(conditionData);
          $.ajax({
              type: 'post',
              url: "/shoppingcart/getListBayIndex",    // 提交到controller的url路径
              data: conditionDataJSON,
              contentType: "application/json",
              cache: false,
              async: true,
              success: function (data) {    // 请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值;;
                  var jsonString = JSON.parse(data) ;
                  if (jsonString.msg == "ok") {
                      $(".grid_6 #cart_nav li .cart_cont").remove();
                      $(".grid_6 #cart_nav li a.cart_li span").html(jsonString.sum+"件");
                      var r =jsonString.shoppingcartList;
                      var html ='<ul class="cart_cont"><li class="no_border"><p>最近添加的项目</p></li><li>';
                      for (var i=0;i<r.length;i++){
                          html +='<li><a href="javaScript:void(0);"alt="' +
                              r[i].goods.gid+'" class="prev_cart getByGoodsId"><div class="cart_vert"><img src="' +
                              r[i].goods.gimage+'" alt="" title="" /></div></a><div class="cont_cart"><h4>' +
                              r[i].goods.gname+'</h4><div class="price">￥' +
                              r[i].goods.price+'</div> </div> <a title="close" class="close" href="#"></a><div class="clear"></div></li>';

                      }
                      html+='<li class="no_border"> <a href="/qd/shopping_cart.html" class="view_cart">查看购物车</a><a href="/qd/checkout.html" class="checkout">进行结账</a></li></ul>';
                      $(".grid_6 #cart_nav li").append(html);
                      /*
                      * 商品详情*/
                      $(".getByGoodsId").click(function () {
                          var  gid =$(this).attr("alt");
                          window.location.href="/goods/getByIdGoods?id="+gid;
                      });
                  } else {
                      $(".grid_6 #cart_nav li .cart_cont").remove();
                      $('.grid_6 #cart_nav li .cart_li').click(function() {
                          alert("请登录！！！");

                      });
                  }
              },
          });
      })
  </script>

</head>
<body>
<div id="app">
  <div class="container_12">
    <div id="top">
      <div class="grid_3">
        <div class="phone_top">
          Call Us +777 (100) 1234
        </div><!-- .phone_top -->
      </div><!-- .grid_3 -->

      <div class="grid_6">
        <div class="welcome">
          <div v-if="!flag">欢迎访客，您可以<a href="/qd/login.html" style="color: #fe6400">登录</a> 或
            <a href="/qd/register.html" style="color: #fe6400">创建帐户</a>.</div>
          <div>
            <p v-if="flag" class="uids" >{{userName}} 欢迎访问坭兴陶推荐网<a style="color: #fe6400;margin-left: 10px;cursor: pointer" @click="goOut">退出</a></p>
          </div>
          <input id="userIdPut" th:if="${session.userInfo!=null}" type="hidden" th:value="${session.userInfo.uid}">
          <input id="userName" th:if="${session.userInfo!=null}" type="hidden" th:value="${session.userInfo.userName}">
        </div><!-- .welcome -->
      </div><!-- .grid_6 -->

      <div class="grid_3">
        <div class="valuta">
          <ul>
            <li class="curent"><a href="qd/customerService.html">客户服务</a></li>
          </ul>
        </div><!-- .valuta -->

        <div class="lang">
          <ul>
            <li class="curent"><a href="/qd/personCenter.html">个人中心</a></li>
            <li><a href="/qd/blog.html">关于我们</a></li>
            <li><a href="/qd/contact_us.html">联系我们</a></li>
          </ul>
        </div><!-- .lang -->
      </div><!-- .grid_3 -->
    </div><!-- #top -->

    <div class="clear"></div>

    <header id="branding">
      <div class="grid_3">
        <hgroup>
          <h1 id="site_logo" ><a href="/goods/index.html" title=""><img src="/images/logo.png" alt="钦州坭兴陶" width="200" height="80"/></a></h1>
          <h2 id="site_description">钦州坭兴陶</h2>
        </hgroup>
      </div><!-- .grid_3 -->

      <div class="grid_3">
        <form class="search">
          <input type="text" name="search" class="entry_form" value="" placeholder="找你想要的..."/>
        </form>
      </div><!-- .grid_3 -->

      <div class="grid_6">
        <ul id="cart_nav">
          <li>
            <a class="cart_li" href="javaScript:void(0);">购物车<span>￥0.00</span></a>
            <ul class="cart_cont">
              <li class="no_border"><p>最近添加的项目</p></li>
              <li class="no_border">
                <a href="/qd/shopping_cart.html" class="view_cart">查看购物车</a>
                <a href="/qd/shopping_cart.html" class="checkout">进行结账</a>
              </li>
            </ul>
          </li>
        </ul>

        <nav class="private">
          <ul>
            <li><a href="/qd/personCenter.html">我的账户</a></li>
            <li class="separator">|</li>
            <li><a href="javascript:ahref();">我的收藏</a></li>
            <li class="separator">|</li>
            <li><a href="/qd/orderInfo.html">我的订单</a></li>
            <li class="separator" v-if="!flag">|</li>
            <li v-if="!flag"><a href="/qd/login.html">登录</a></li>
            <li class="separator">|</li>
            <li v-if="!flag" ><a href="/qd/register.html">注册</a></li>
          </ul>
        </nav><!-- .private -->
      </div><!-- .grid_6 -->
    </header><!-- #branding -->
  </div><!-- .container_12 -->
  <div class="clear"></div>

  <div id="block_nav_primary">
    <div class="container_12">
      <div class="grid_12">
        <nav class="primary">
          <ul>
            <li class="curent"><a href="/goods/index.html">首页</a></li>
            <li><a href="/qd/all_catalog.html">全部宝贝</a></li>
            <li><a href="/qd/catalog_grid.html">热销推荐</a></li>
            <li><a href="/qd/compare.html">猜你喜欢</a></li>
            <li>
              <a href="/qd/catalog_list.html">新品推荐</a>
            </li>


            <li>
              <a href="#">更多精彩</a>
              <ul class="sub">
                <li><a href="/qd/contact_us.html">联系我们</a></li>
                <li><a href="/qd/blog.html">关于我们</a></li>

              </ul>
            </li>
          </ul>
        </nav><!-- .primary -->
      </div><!-- .grid_12 -->
    </div><!-- .container_12 -->
  </div><!-- .block_nav_primary -->

  <div class="clear"></div>

  <!--内容主体-->
  <section id="main" class="entire_width" style="">

    <div class="layui-tab" align="center">
      <ul class="layui-tab-title">
        <li class="layui-this">我的信息</li>
        <li>我的头像</li>
        <li>常用地址</li>
        <li>修改密码</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show layui-formUser">

          <form class="layui-form" action="" >
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">居住城市</label>
              <div class="layui-input-block">
                <input type="text" name="city" placeholder="请输入居住城市" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">年龄</label>
              <div class="layui-input-block">
                <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">手机号</label>
              <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">职业</label>
              <div class="layui-input-block">
                <input type="text" name="occupation" placeholder="请输入职业" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">收入情况</label>
              <div class="layui-input-block">
                <input type="text" name="income" placeholder="请输入收入情况" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">个性签名</label>
              <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="signature" class="layui-textarea"></textarea>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formDemo" type="button" id="infoSubmit">立即提交</button>
              </div>
            </div>
          </form>
        </div>
        <div class="layui-tab-item" style="margin-left: 80px;margin-top: 30px;">
          <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:8081/file/upload"
                  accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-button type="primary" @click="updateAvatar" style="margin-left: 50px;margin-top: 10px;">修改</el-button>
        </div>

        <div class="layui-tab-item layui-formAdressr">
          <div class="layui-form-item">
            <label class="layui-form-label">常用地址</label>
            <div class="layui-input-block">
              <div>
                <el-input type="textarea" :rows="3" placeholder="请输入常用地址" v-model="form.address" style="width: 400px;margin-bottom: 20px;"> </el-input>
              </div>
              <el-button @click="submitAddress" type="primary">修改</el-button>
            </div>
          </div>
        </div>

        <div class="layui-tab-item layui-formPwd" >
          <div class="layui-form-item " >
            <label class="layui-form-label" style="width: 100px">请输入当前密码</label>
            <div class="layui-input-block">
              <input type="text" name="formerP" required  lay-verify="required" placeholder="请输入当前密码" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">请输入新密码</label>
            <div class="layui-input-block">
              <input type="text" name="newP" required  lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">再次输入新密码</label>
            <div class="layui-input-block">
              <input type="text" name="confirmP" required  lay-verify="required" placeholder="再次输入新密码" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-filter="formDemo11" id="updatePwd">更改</button>
            </div>
          </div>

        </div>
      </div>
    </div>

  </section>

  <div class="clear"></div>

  <footer>
    <div class="f_navigation">
      <div class="container_12">
        <div class="grid_3">
          <h3>联系我们</h3>
          <ul class="f_contact">
            <li>钦州湾广场</li>
            <li>+777 (100) 1234</li>
            <li>mail@example.com</li>
          </ul><!-- .f_contact -->
        </div><!-- .grid_3 -->

        <div class="grid_3">
          <h3>信息</h3>
          <nav class="f_menu">
            <ul>
              <li><a href="/qd/blog.html">关于我们</a></li>
              <li><a href="#">隐私政策</a></li>
              <li><a href="#">条款及细则</a></li>
              <li><a href="#">安全付款</a></li>
            </ul>
          </nav><!-- .private -->
        </div><!-- .grid_3 -->

        <div class="grid_3">
          <h3>顾客服务</h3>
          <nav class="f_menu">
            <ul>
              <li><a href="/qd/contact_us.html">联系方式</a></li>
              <li><a href="#">返回</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">网站地图</a></li>
            </ul>
          </nav><!-- .private -->
        </div><!-- .grid_3 -->
        <div class="clear"></div>
      </div><!-- .container_12 -->
    </div><!-- .f_navigation -->

    <div class="f_info">
      <div class="container_12" >
        <div class="grid_6" style="margin: 0 auto; width: 100%;">
          <p class="copyright" style="text-align: center;">© 钦州坭兴陶, 2020.07 </p>
        </div><!-- .grid_6 -->
        <div class="clear"></div>
      </div><!-- .container_12 -->
    </div><!-- .f_info -->
  </footer>

</div>
<script>
    /**
     * 修改个人信息
     *
     */
    $(document).ready(function(){
        $("#infoSubmit").click(function(){
            if (confirm("确认要提交吗?")){
                let userName = $("input[name='userName']").val();
                let city = $("input[name='city']").val();
                let age = $("input[name='age']").val();
                let phone = $("input[name='phone']").val();
                let occupation = $("input[name='occupation']").val();
                let income = $("input[name='income']").val();
                let signature = $("[name='signature']").val();
                $.post("/user/updateUserInfo",
                    {
                        "uid":sessionStorage.getItem("userId"),
                        "userName":userName,
                        "sex":$('input:radio:checked').val(),
                        "city":city,
                        "age":age,
                        "phone":phone,
                        "occupation":occupation,
                        "income":income,
                        "signature":signature,
                    },
                    function(ret){
                        if (ret.status == "success"){
                            alert("修改成功!")
                        }else{
                            alert("修改失败!")
                        }
                    })
            }
        })
    })
</script>

<script>
    //修改密码
    $(document).ready(function () {
        $("#updatePwd").click(function () {
            var formerP = $("input[name='formerP']").val();
            var newP =$("input[name='newP']").val();
            var confirmP =$("input[name='confirmP']").val();

            if (formerP == "" || newP == "" || formerP == ""){
                alert("所有字段都不允许为空请重新填写!")
                return
            }

            if (confirmP == newP) {
                if (confirm("确认要修改密码吗?")) {
                    $.post("/user/updateUserPassword",
                        {
                            "uid": sessionStorage.getItem("userId"),
                            "password": newP
                        },
                        function (ret) {
                            if (ret.status == "success") {
                                alert("修改成功!")
                            } else if (ret.status == "error"){
                                alert("修改失败!")
                            }else {
                                alert("原密码错误!")
                            }
                        })
                } else {
                    alert("两次密码不一致，请重新输入!")
                }
            }
        })
    })
</script>
<script>
    function ahref() {

        if (sessionStorage.getItem("userId") != null && sessionStorage.getItem("userId") != "") {
            // window.location.href = "/collect/getCollect?userId=" + sessionStorage.getItem("userId");
            window.location.href = "/qd/collection.html";
        }else {
            alert("请先登录！")
        }
    }
    function seeCart(){
        //window.location.href = "/shoppingcart/listBay?userId="+sessionStorage.getItem("userId");
        if (sessionStorage.getItem("userId") != null && sessionStorage.getItem("userId") != "") {
            window.location.href = "/qd/shopping_cart.html";
        }else {
            alert("请先登录！")
        }
    }
    $(function() {
        var userId = $("#userIdPut").val()== undefined ? '': $("#userIdPut").val().trim();
        if (userId != null && userId != ""){
            sessionStorage.setItem("userId",userId);
            sessionStorage.setItem("userName",$("#userName").val());
        }

        $(".search").click(function () {
            var search = $("input[name='search']").val();
            var json={"search":search};
            if (search!=""){
                $.post("/goods/search",json,function(r){

                },"text");
            }


        });


    });

    //Form
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    let vue = new Vue({
        el: '#app',
        data() {
            return {
                form:{
                    imgUrl:"",
                    userId:"",
                    address:"",
                    userName:""
                }
            }
        },
        methods:{
            handleAvatarSuccess(res, file) {
                if (res.status=="200"){
                    this.form.imgUrl=res.data
                }else{
                    this.$message.error(res.msg)
                }
                console.log(file)
            },
            beforeAvatarUpload(file) {
                console.log(file.type)
                const isJPG = file.type == 'image/jpeg'||file.type == 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            updateAvatar(){
                let that=this

                $.ajax({
                    type:'POST',
                    url: '/user/updateAvatar',
                    datatype:"json",    //指返回的数据类型
                    contentType:"application/json",     //发送到服务器的数据的编码
                    data:JSON.stringify(that.form),
                    success:function (res) {     //成功后的回调函数  res返回的数据
                        if (res.status=="200"){
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }else{
                            that.$message.error('修改失败！');
                        }
                    }
                })

            },
            getUserInfo(){
                let that=this
                //信息预处理
                let userId = sessionStorage.getItem("userId");
                if (userId != null && userId != ""){
                    $.post("/user/showUserInfo",{"userId":userId},function(ret){
                        that.form.imgUrl=ret.avatar
                        that.form.userId=ret.uid
                        $("input[name='userName']").val(ret.userName);
                        $("#userNameInfo").text("欢迎您，"+ret.userName)
                        $("input[name='city']").val(ret.city);
                        $("input[name='age']").val(ret.age);
                        $("input[name='phone']").val(ret.phone);
                        $("input[name='occupation']").val(ret.occupation);
                        $("input[name='income']").val(ret.income);
                        $("[name='signature']").val(ret.signature);
                    })

                    $.get("/address/getAddresByUserId?userId="+userId,function(res){
                        if (res!=null) {
                            that.form.address=res.data.addresee;
                        }

                    });
                    if (userId != null && userId != ""){
                        this.flag=true
                        this.userName=sessionStorage.getItem("userName")
                    }
                }else {
                    alert("未登录请重新登录!")
                    window.location.href = "/qd/login.html";
                }
            },
            submitAddress(){
                let that=this
                $.ajax({
                    type:'POST',
                    url: '/address/update',
                    datatype:"json",    //指返回的数据类型
                    contentType:"application/json",     //发送到服务器的数据的编码
                    data:JSON.stringify(that.form),
                    success:function (res) {     //成功后的回调函数  res返回的数据
                        if (res.status=="200"){
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }else{
                            that.$message.error('修改失败！');
                        }
                    }
                })
            }
        },
        created(){
            this.getUserInfo()
        }
    })
</script>

</body>
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
</html>

